<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <script type="text/javascript" src="../../../static/script/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="../../../static/script/phanimate.jquery.js"></script>
    <link rel="stylesheet" href="../../../static/css/register123.css">



</head>
<body>
<div>
    <div class="box">
        <div class="lightbar"></div>
        <div class="toplayer"></div>
        <h2>注册管理员</h2>
    </div>
    <span id="errorMsg">
        ${ requestScope.msg }
    </span>
    <form id="form" action="${pageContext.request.contextPath}/manager123/registmanager" method="post" >
        <input type="hidden" name="action" value="regist2">

        <div class="inputBox">
            <input type="text" id="username" placeholder="用户名称" onkeyup="validate1();" name="username" value="${requestScope.username}">
            <span class="indicator" id="indicator1"></span>
        </div>


        <div class="inputBox">
            <input type="password" id="password1" placeholder="用户密码" onkeyup="validate2();" name="password" >
            <span class="indicator" id="indicator2"></span>
        </div>


        <div class="inputBox">
            <input type="password" id="password2" placeholder="确认密码" onkeyup="validate3();">
            <span class="indicator" id="indicator3"></span>
        </div>


        <div class="inputBox">
            <input type="text" id="email" placeholder="电子邮箱" onkeyup="validate4();" name="email" value="${requestScope.email}">
            <span class="indicator" id="indicator4"></span>
        </div>


        <div class="container">
            <a href="${pageContext.request.contextPath}/manager123/tomanager"><span>返回界面</span></a>
            <a  onclick="document:form.submit()"><span>确认注册</span></a>
        </div>


    </form>
</div>
<script>
    // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
    function validate1() {
        const indicator1 = document.getElementById('indicator1');
        const username = document.getElementById('username').value;

        const pattern =/^\w{5,12}$/;

        if (username.match(pattern)) {
            indicator1.classList.add('valid')
            indicator1.classList.remove('invalid')
        } else {
            indicator1.classList.add('invalid')
            indicator1.classList.remove('valid')
        }
        if (username == "") {
            indicator1.classList.remove('valid')
            indicator1.classList.remove('invalid')
        }
    }



    // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
    function validate2() {
        const indicator2 = document.getElementById('indicator2');
        const password1 = document.getElementById('password1').value;

        const pattern =/^\w{5,12}$/;

        if (password1.match(pattern)) {
            indicator2.classList.add('valid')
            indicator2.classList.remove('invalid')
        } else {
            indicator2.classList.add('invalid')
            indicator2.classList.remove('valid')
        }
        if (password1 == "") {
            indicator2.classList.remove('valid')
            indicator2.classList.remove('invalid')
        }
    }

    // 验证确认密码：和密码相同
    function validate3() {
        const indicator3 = document.getElementById('indicator3');
        const password1 = document.getElementById('password1').value;
        const password2 = document.getElementById('password2').value;
        

        if (password1==password2) {
            indicator3.classList.add('valid')
            indicator3.classList.remove('invalid')
        } else {
            indicator3.classList.add('invalid')
            indicator3.classList.remove('valid')
        }
        if (password2 == "") {
            indicator3.classList.remove('valid')
            indicator3.classList.remove('invalid')
        }
    }


    // 邮箱验证：xxxxx@xxx.com
    function validate4() {
        const email = document.getElementById('email').value;
        const indicator4 = document.getElementById('indicator4');
        const pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/

        if (email.match(pattern)) {
            indicator4.classList.add('valid')
            indicator4.classList.remove('invalid')
        } else {
            indicator4.classList.add('invalid')
            indicator4.classList.remove('valid')
        }
        if (email == "") {
            indicator4.classList.remove('valid')
            indicator4.classList.remove('invalid')
        }
    }
</script>
<script type="text/javascript">
    // 页面加载完成之后
    $(function () {
        $("#username").blur(function () {
            //1 获取用户名
            var username = this.value;
            $.getJSON("http://localhost:8080/Restaurant/userServlet","action=ajaxExistsUsername&username=" + username,function (data) {
                console.log(data);
                if (data.existsUsername) {
                    $("span#errorMsg").text("用户名已存在！");
                } else {
                    $("span#errorMsg").text("用户名可用！");
                }
            });
        });
    });
</script>
</body>
</html>